<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    body {
      height: 3000px;
    }


    div {
        height: 2000px;
        background: red;
        border-top: solid 50px #efbc0f;
        border-bottom: solid 50px #1bb491;
    }
    span {
        border-radius: 50%;
        color: #fff;
        background: #000;
        width: 50px;
        height: 50px;
        display: block;
        text-align: center;
        line-height: 50px;
        position: fixed;
        top: 50%;
        right: 50px;
        border: solid 2px #ddd;
    }
  </style>
<body>
  <div id="app">hdcms.com</div>
  <span>TOP</span>
<script type="module">
//     setInterval(() => {
// //参数为对象，{top:垂直偏移量,left:水平偏移量,behavior:'滚动方式'}
//       document.documentElement.scrollBy({ top: 30, behavior: 'smooth' })
//     }, 100)


    //element.scroll() 或 element.scrollTo()滚动到指定位置
    //参数:参数为对象，{top:X轴文档位置,left:Y轴文档位置,behavior:'滚动方式'}


    //element.scrollIntoView(bool)滚动到顶部或底部   参数：true元素定位到顶部，为false定位到窗口底部
    //#文档滚动位置

   
   let app = document.querySelector('#app');
   if(document.documentElement.scrollTop==0){
   document.querySelector('span').addEventListener('click', () => {
     
       
        app.scrollIntoView({ block: 'end', behavior: 'smooth' });
        
       }
    )
      }
      if(document.documentElement.offsetHeight==document.documentElement.scrollHeight+document.documentElement.clientHeight){
    document.querySelector('span').addEventListener('click', () => {
    
    
     app.currentTarget.scrollIntoView({ block: 'start', behavior: 'smooth' });
     
    }
 )
  }
  </script>
</body>
</html>